<template>
  <van-tabbar
    route
    v-model="active"
    active-color="#1D91FF"
    fixed
    inactive-color="#868D9A"
    safe-area-inset-bottom
    :class="isCurrent && isNight ? 'bg-night' : 'bgFooter'"
    @change="onChange"
  >
    <van-tabbar-item name="home" to="/home">
      <!-- <span>{{$t('首页')}}</span>
                <template #icon="props">
                    <img :src="props.active ? home.active : home.inactive" />
                </template> -->
      <template #icon="props">
        <Lottie
          :options="defaultOptions"
          :height="45"
          :width="45"
          @animCreated="handleAnimation"
        />
      </template>
    </van-tabbar-item>
    <van-tabbar-item
      name="/trade/btc"
      :to="{
        name: 'Trade',
        params: { symbol: getStorage('tradeSymbol') || 'btc' },
      }"
    >
      <!-- <span>{{ $t("交易") }}</span>
      <template #icon="props">
        <img :src="props.active ? trade.active : trade.inactive" />
      </template> -->
      <Lottie
        :options="defaultOptions2"
        :height="45"
        :width="45"
        @animCreated="handleAnimation2"
      />
    </van-tabbar-item>
    <van-tabbar-item
      name="perpetualContract/btc"
      :to="{ name: 'perpetualContract', params: { symbol: 'btc' } }"
    >
      <!-- <span>{{ $t("合约") }}</span>
      <template #icon="props">
        <img :src="props.active ? contract.active : contract.inactive" />
      </template> -->
      <Lottie
        :options="defaultOptions3"
        :height="45"
        :width="45"
        @animCreated="handleAnimation3"
      />
    </van-tabbar-item>
    <van-tabbar-item
      name="financialManagement"
      :to="{ name: 'financialManagement' }"
    >
      <!-- <span>{{ $t("理财") }}</span>
      <template #icon="props">
        <img :src="props.active ? qoutes.active : qoutes.inactive" />
      </template> -->
      <Lottie
        :options="defaultOptions4"
        :height="45"
        :width="45"
        @animCreated="handleAnimation4"
      />
    </van-tabbar-item>
    <van-tabbar-item name="funds" to="/funds">
      <!-- <span>{{ $t("帐户") }}</span>
      <template #icon="props">
        <img :src="props.active ? funds.active : funds.inactive" />
      </template> -->
      <Lottie
        :options="defaultOptions5"
        :height="45"
        :width="45"
        @animCreated="handleAnimation5"
      />
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import * as animationData from "@/assets/json/1 Home.json";
import * as animationData2 from "@/assets/json/2 Trade.json";
import * as animationData3 from "@/assets/json/3 Contract.json";
import * as animationData4 from "@/assets/json/4 Financial.json";
import * as animationData5 from "@/assets/json/5 Account.json";
import { THEME } from "@/config/theme";
import { getStorage } from "@/utils/utis";
export default {
  props: {
    isActive: {
      type: Boolean,
      default: true,
    },
    isCurrent: {
      type: Boolean,
      default: false,
    },
    isNight: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.anim2.stop();
    this.anim3.stop();
    this.anim4.stop();
    this.anim5.stop();
  },
  components: {},
  computed: {},
  methods: {
    onChange(index) {
      if (index == "home") {
        this.anim.play();
        this.anim2.stop();
        this.anim3.stop();
        this.anim4.stop();
        this.anim5.stop();
      } else if (index == "/trade/btc") {
        this.anim2.play();
        this.anim.stop();
        this.anim3.stop();
        this.anim4.stop();
        this.anim5.stop();
      } else if (index == "perpetualContract/btc") {
        this.anim2.stop();
        this.anim.stop();
        this.anim4.stop();
        this.anim5.stop();
        this.anim3.play();
      } else if (index == "financialManagement") {
        this.anim4.play();
        this.anim2.stop();
        this.anim3.stop();
        this.anim.stop();
        this.anim5.stop();
      } else if (index == "funds") {
        this.anim5.play();
        this.anim2.stop();
        this.anim3.stop();
        this.anim4.stop();
        this.anim.stop();
      }
    },
    handleAnimation: function (anim) {
      this.anim = anim;
    },
    handleAnimation2: function (anim) {
      this.anim2 = anim;
    },
    handleAnimation3: function (anim) {
      this.anim3 = anim;
    },
    handleAnimation4: function (anim) {
      this.anim4 = anim;
    },
    handleAnimation5: function (anim) {
      this.anim5 = anim;
    },
  },
  data() {
    return {
      anim: null,
      anim2: null,
      anim3: null,
      anim4: null,
      anim5: null,
      defaultOptions: {
        animationData: animationData,
        loop: false,
        autoplay: true,
      },

      defaultOptions2: {
        animationData: animationData2,
        loop: false,
        autoplay: true,
      },
      defaultOptions3: {
        animationData: animationData3,
        loop: false,
        autoplay: true,
      },
      defaultOptions4: {
        animationData: animationData4,
        loop: false,
        autoplay: true,
      },
      defaultOptions5: {
        animationData: animationData5,
        loop: false,
        autoplay: true,
      },
      getStorage,
      active: "home",
      home: {
        active: require(`../../assets/theme/${THEME}/image/footer/home1.png`),
        inactive: require(`../../assets/theme/${THEME}/image/footer/home2.png`),
      },
      trade: {
        active: require(`../../assets/theme/${THEME}/image/footer/trade1.png`),
        inactive: require(`../../assets/theme/${THEME}/image/footer/trade2.png`),
      },
      contract: {
        active: require(`../../assets/theme/${THEME}/image/footer/contract1.png`),
        inactive: require(`../../assets/theme/${THEME}/image/footer/contract2.png`),
      },
      qoutes: {
        active: require(`../../assets/theme/${THEME}/image/footer/quotes1.png`),
        inactive: require(`../../assets/theme/${THEME}/image/footer/quotes2.png`),
      },
      funds: {
        active: require(`../../assets/theme/${THEME}/image/footer/funds1.png`),
        inactive: require(`../../assets/theme/${THEME}/image/footer/funds2.png`),
      },
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/init.scss";
.van-tabbar--fixed {
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.van-tabbar {
  height: 108px;
  font-size: 22px;
}
.van-tabbar-item__icon img {
  height: 56px;
  width: 56px;
}
::v-deep .van-tabbar-item__icon {
  margin-bottom: 9px;
}
::v-deep .van-tabbar-item__text {
  text-align: center;
}
.bgFooter {
  ::v-deep .van-tabbar-item--active {
    background: $footer_background;
  }
}

.bg-night {
  ::v-deep .van-tabbar-item--active {
    background: $night;
  }
}
::v-deep .van-tabbar-item--active {
  color: #eaad10 !important;
}
</style>
